import 'dart:ffi';

import 'package:book_app/feature/comon/web_view.dart';
import 'package:book_app/feature/loginregister/viewmodel/register_view_model.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:book_app/product/base/base_view.dart';
import 'package:book_app/product/constants/app_colors.dart';
import 'package:timer_button/timer_button.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webview_flutter/webview_flutter.dart';

class RegisterView extends StatefulWidget {
  const RegisterView({super.key});

  @override
  State<RegisterView> createState() => _RegisterViewState();
}

class _RegisterViewState extends State<RegisterView> {

  final FocusNode _focusNode = FocusNode();

  bool codeInput = false;
  void _changeCodeInputLine() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      codeInput = !codeInput;
    });
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        print('验证码得到焦点');
        _changeCodeInputLine();
      }else{
        print('验证码失去焦点');
        _changeCodeInputLine();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return BaseView<RegisterViewModel>(
      viewModel: RegisterViewModel(),
      onPageBuilder: (BuildContext context, RegisterViewModel viewModel) =>
          Scaffold(
        extendBodyBehindAppBar: true,
        appBar: buildAppbar(),
        body: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/appbackground.png'),
              // 替换为你的背景图片路径
              fit: BoxFit.cover,
            ),
          ),
          child: SafeArea(
            child: ListView(
              physics: const NeverScrollableScrollPhysics(),
              children: [
                const SizedBox(
                  height: 50,
                ),
                const Padding(
                  padding: EdgeInsets.only(top: 30, left: 34, right: 34),
                  child: Text(
                    '邮箱注册',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 27),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 10, left: 34, right: 34),
                  child: TextField(
                    style: const TextStyle(fontSize: 17, color: Colors.white),
                    decoration: InputDecoration(
                      hintText: '请输入邮箱',
                      hintStyle:
                          TextStyle(color: AppColors.text204, fontSize: 16),
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: AppColors.white33)),
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: AppColors.orange)),
                    ),
                    cursorColor: AppColors.orange,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 30, left: 34, right: 34),
                  child: Container(
                    padding: const EdgeInsets.only(right: 0.0),
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          color:
                              codeInput ? AppColors.orange : AppColors.white33,
                          width: 1.0,
                        ),
                      ),
                    ),
                    child: Row(
                      children: [
                        // 地区号图标
                        Expanded(
                          child: TextField(
                            style: const TextStyle(
                                fontSize: 17, color: Colors.white),
                            decoration: InputDecoration(
                              hintText: '请输入验证码',
                              hintStyle: TextStyle(
                                  color: AppColors.text204, fontSize: 16),
                              enabledBorder: InputBorder.none,
                              focusedBorder: InputBorder.none,
                            ),
                            focusNode: _focusNode,
                          ),
                        ),
                        TimerButton(
                          label: "获取验证码",
                          timeOutInSeconds: 60,
                          timeUpFlag: true,
                          onPressed: () {},
                        ),
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 10, left: 34, right: 34),
                  child: TextField(
                    style: const TextStyle(fontSize: 17, color: Colors.white),
                    decoration: InputDecoration(
                      hintText: '请输入密码',
                      hintStyle:
                          TextStyle(color: AppColors.text204, fontSize: 16),
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: AppColors.white33)),
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: AppColors.orange)),
                    ),
                    cursorColor: AppColors.orange,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 30, left: 34, right: 34),
                  child: RichText(
                    text: TextSpan(children: [
                      TextSpan(
                        text: '我已阅读并同意',
                        style: TextStyle(color: AppColors.white),
                      ),
                      TextSpan(
                        text: '用户协议',
                        style: TextStyle(color: AppColors.orange),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            _launchURL();
                          },
                      ),
                      TextSpan(
                        text: '和',
                        style: TextStyle(color: AppColors.white),
                      ),
                      TextSpan(
                        text: '隐私政策',
                        style: TextStyle(color: AppColors.orange),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            _launchURL();
                          },
                      ),
                    ]),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 30, left: 34, right: 34),
                  child: SizedBox(
                    height: 45,
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColors.orange,
                        foregroundColor: Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        //change text color of button
                      ),
                      child: const Text(
                        '同意并注册',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 16),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      onModelReady: (model) {
        model.setContext(context);
      },
    );
  }

  _launchURL() async {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const ACWebView(
          url: 'https://cloudtest.actec.com.cn/public/chargers_user_agreement.html',
          title: '用户协议',
        ),
      ),
    );
  }

  AppBar buildAppbar() {
    return AppBar(
      backgroundColor: AppColors.transparent,
      elevation: 0,
      actions: [
        // TextButton(
        //     onPressed: () {
        //       // 左边按钮的操作
        //     },
        //     child: const Text(
        //       '邮箱注册',
        //       style: TextStyle(color: Colors.white),
        //     ))
      ],
      centerTitle: true,
    );
  }
}
